<template>
  <div class="page-content">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="tableClose"
    >
      <el-form
        :model="addInfo"
        status-icon
        :rules="rules"
        ref="addFormRef"
        label-width="80px"
        class="demo-addInfo"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地id" prop="baseId">
              <el-input v-model="addInfo.baseId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-input
                v-model="addInfo.type"
                placeholder="请输入"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="目的地" prop="destination">
              <el-input
                v-model="addInfo.destination"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经手人" prop="handler">
              <el-input
                v-model="addInfo.handler"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="1"
                v-model="addInfo.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">订单详情</el-divider>
        <el-row>
          <el-col
            :span="8"
            v-for="(item, index) in addInfo.dovecoteOutBillDtoList"
            :key="item.key"
            style="border-bottom: 1px solid #f0f0f0; padding: 10px"
          >
            <el-card :body-style="{ padding: '0px' }" class="card">
              <div>
                <el-row style="margin-top: 10px">
                  <el-form-item
                    :label="'鸽棚id'"
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                    :prop="
                      'dovecoteOutBillDtoList.' + index + '.dovecoteNumber'
                    "
                  >
                    <el-input
                      placeholder="请输入鸽棚id"
                      v-model.number="item.dovecoteNumber"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    :label="'负责人'"
                    :prop="
                      'dovecoteOutBillDtoList.' + index + '.dovecoteDirector'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      placeholder="请输入负责人"
                      v-model="item.dovecoteDirector"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    :label="'员工'"
                    :prop="'dovecoteOutBillDtoList.' + index + '.employeeName'"
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      placeholder="请输入员工"
                      v-model="item.employeeName"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    :label="'质量(斤)'"
                    :prop="
                      'dovecoteOutBillDtoList.' +
                      index +
                      '.dovecoteOutBaseDtoList.' +
                      0 +
                      '.amount'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      placeholder="请输入数量"
                      v-model.number="item.dovecoteOutBaseDtoList[0].amount"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    :label="'单价(元)'"
                    :prop="
                      'dovecoteOutBillDtoList.' +
                      index +
                      '.dovecoteOutBaseDtoList.' +
                      0 +
                      '.unitPrice'
                    "
                    :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      placeholder="请输入单价"
                      v-model.number="item.dovecoteOutBaseDtoList[0].unitPrice"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    :label="'备注'"
                    :prop="'dovecoteOutBillDtoList.' + index + '.remark'"
                  >
                    <el-input
                      type="textarea"
                      :rows="1"
                      placeholder="请输入备注"
                      v-model="item.remark"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row style="margin-bottom: 10px">
                  <el-col>
                    <el-button
                      style="margin-left: 45%"
                      @click.prevent="removeDomain(item)"
                      type="danger"
                      icon="el-icon-delete"
                      plain
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-form-item>
          <el-row>
            <el-col :span="8">
              <el-button type="primary" @click="addOrderInfo('addInfo')"
                >提交</el-button
              >
            </el-col>
            <el-col :span="8">
              <el-button @click="addDomain()">新增鸽棚</el-button>
            </el-col>
            <el-col :span="8">
              <el-button @click="closeform">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { AddOrder } from "@/api/Dovecote/ProductionCount/ShipmentOutBill.js";
export default {
  name: "BadAddFrom",
  props: {
    addInfo: {
      Object,
      default: {},
    },
    dialogVisible: {
      Boolean,
      default: false,
    },
    editFrom: {
      Object,
      default: {},
    },
    //表名
    title: {
      String,
      default: "",
    },
  },
  data() {
    return {
      titleName: "鸽棚详情",
      dialogFrom: false,
      //选择鸽棚号
      numberList: [
        {
          id: 0,
          dovecoteNumber: "A01",
        },
        {
          id: 1,
          dovecoteNumber: "A02",
        },
        {
          id: 2,
          dovecoteNumber: "A03",
        },
      ],

      //残次品类型
      typeList: [
        {
          id: 0,
          typeName: "五两鸽",
        },
        {
          id: 1,
          typeName: "六两鸽",
        },
        {
          id: 2,
          typeName: "七两鸽",
        },
      ],

      //表单规则
      rules: {
        baseName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        destination: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        handler: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  methods: {
    //查询表格数据
    DisplayData() {
      this.$emit("DisplayData");
    },

    //添加订单
    addOrderInfo() {
      this.$refs["addFormRef"].validate(async (valid) => {
        if (valid) {
          console.log("kkk", this.addInfo);
          const { data: res } = await AddOrder(this.addInfo);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("增加成功");
            this.closeform();
          } else {
            if (res.data == null) {
              return this.$message.error("添加失败");
            }
          }
        }
      });
    },

    //重置
    resetForm() {
      this.$nextTick(() => {
        this.$refs.addFormRef.resetFields();
      });
    },
    //删除记录
    removeDomain(item) {
      var index = this.addInfo.dovecoteOutBillDtoList.indexOf(item);
      if (index !== -1) {
        this.addInfo.dovecoteOutBillDtoList.splice(index, 1);
      }
    },
    //新增鸽棚
    addDomain() {
      this.addInfo.dovecoteOutBillDtoList.push({
        dovecoteDirector: "",
        dovecoteNumber: "",
        employeeName: "",
        remark: "",
        dovecoteOutBaseDtoList: [
          {
            amount: 0,
            unitPrice: 0,
          },
        ],
      });
    },

    //关闭表单
    closeform() {
      var a = false;
      this.$emit("closeAddDialog", a);
      this.DisplayData();
      this.resetForm();
    },

    // 关闭弹窗
    tableClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeform();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.card {
  padding-right: 10px;
  background-image: url("../../../assets/image/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>